import React, { useState, useEffect } from "react";
import { Input, Button, Form, Checkbox } from "antd";
import {
  UserOutlined,
  LockOutlined,
  TagOutlined,
  LoadingOutlined,
} from "@ant-design/icons";
import { request, prompt, auth } from "@/utils/T";
import EnumAPI from "@/config/EnumAPI";
import EnumRouter from "@/config/EnumRouter";
import styles from "./index.module.scss";

/**
 * 登录页面
 */
const Login = ({ history, props }: any) => {
  const [form] = Form.useForm();

  const [loginLoading, setLoginLoading] = useState(false);
  const [codeLoading, setCodeLoading] = useState(false);
  // const [isRemember, setIsRemember] = useState(true);
  const [codeImg, setCodeImg] = useState(""); // 验证码
  const [codeId, setCodeId] = useState(""); // 验证码id

  useEffect(() => {
    getCodeImg();
  }, []);

  /**
   * 提交登录
   */
  const onSubmit = (values: any) => {
    setLoginLoading(true);

    loginAction({
      loginName: values.userAccount,
      password: values.password,
      code: values.code,
      codeId: codeId,
    });
  };

  /**
   * 登录
   * @param values
   */
  const loginAction = (values: any) => {
    request.postJSON(EnumAPI.login, values).then(
      (resp: any) => {
        const { user, token } = resp.data;
        auth.setLoginInfo(user);
        auth.setToken(token);
        history.push(EnumRouter.business_search);
      },
      (resp) => {
        setLoginLoading(false);
        prompt.error(resp.msg);
      }
    );
  };

  /**
   * 获取验证码
   */
  const getCodeImg = () => {
    setCodeId("");
    setCodeImg("");
    setCodeLoading(true);
    request.get(EnumAPI.getCode, {}).then(
      (resp: any) => {
        setCodeImg(resp.data.img);
        setCodeId(resp.data.codeId);
        setCodeLoading(false);
      },
      (resp) => {
        setCodeImg("");
        setCodeLoading(false);
      }
    );
  };

  return (
    <div className={styles.login}>
      <div className={styles.login_box}>
        <div className={styles.login_box_left}>
          <div className={styles.inner}>
            <Form form={form} onFinish={onSubmit}>
              <div className={styles.login_top}>联通沃云运营管理系统</div>
              <div>
                <Form.Item
                  name={"userAccount"}
                  rules={[
                    { required: true, message: "请输入登录账号!" },
                    { max: 50, message: "最多输入50个字符!" },
                  ]}
                >
                  <Input
                    style={{ width: "100%" }}
                    placeholder="登录账号"
                    // allowClear
                    prefix={<UserOutlined style={{ color: "#224E4A" }} />}
                  />
                </Form.Item>
                <Form.Item
                  // label={'密码'}
                  name={"password"}
                  rules={[
                    { required: true, message: "请输入密码!" },
                    { min: 8, message: "密码不足8位!" },
                    { max: 20, message: "密码不能超过20位!" },
                  ]}
                >
                  <Input
                    style={{ width: "100%" }}
                    type="password"
                    placeholder="密码"
                    // allowClear
                    prefix={<LockOutlined style={{ color: "#224E4A" }} />}
                  />
                </Form.Item>
                <Form.Item
                  name={"code"}
                  rules={[{ required: true, message: "请输入验证码!" }]}
                >
                  <div className={styles.codeBox}>
                    <Input
                      style={{ width: "calc(100% - 200px)" }}
                      placeholder="验证码"
                      // allowClear
                      prefix={<TagOutlined style={{ color: "#224E4A" }} />}
                    />
                    <dl className={styles.codeBlock}>
                      <dt
                        style={{
                          backgroundImage: `url(${codeImg})`,
                        }}
                      >
                        {codeLoading && <LoadingOutlined />}
                      </dt>
                      <dd>
                        <div>看不清</div>
                        <div onClick={() => getCodeImg()}>换一张</div>
                      </dd>
                    </dl>
                  </div>
                </Form.Item>
              </div>
              <Form.Item
                valuePropName={"checked"}
                name={"remember"}
                initialValue={true}
              >
                <Checkbox>记住密码</Checkbox>
                <br />
                <div>
                  <Button
                    loading={loginLoading}
                    type="primary"
                    style={{ width: "100%" }}
                    htmlType="submit"
                  >
                    登录
                  </Button>
                </div>
              </Form.Item>
            </Form>
          </div>
        </div>
      </div>
      <footer>
        Copyright2020©联通云数据有限公司 版权所有 京 ICP备 12002002号
      </footer>
    </div>
  );
};

export default Login;
